<template>
  <up-popup closeable :show="show" :round="10" mode="center" @close="close">
    <view class="tableUser">
      <view class="search">
        <uni-easyinput
          class="uni-mt-5"
          suffixIcon="search"
          v-model="params.name"
          placeholder="请输入姓名"
          @iconClick="search"
        ></uni-easyinput>
        <!-- <uni-easyinput v-model="params.name" placeholder="请输入姓名"></uni-easyinput> -->
      </view>
      <view>
        <view  class="table-user-body" :class="sigleSelect ? 'my_userList uni-container' : 'uni-container'">
        <uni-table
          ref="table"
          :loading="loading"
          border
          stripe
          type="selection"
          emptyText="暂无更多数据"
          @selection-change="selectionChange"
        >
        <uni-tr>
            <uni-th width="100" align="left">姓名</uni-th>
            <uni-th width="150" align="left">所属机构</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tableList" :key="index">
            <uni-td>{{ item.name }}</uni-td>
            <uni-td>
              <view class="name">{{ item.orgName }}</view>
            </uni-td>
          </uni-tr>
        </uni-table>
      
      </view>
      <view class="uni-pagination-box"
          ><uni-pagination
            show-icon
            :page-size="params.pageSize"
            :current="params.pageNum"
            :total="total"
            @change="change"
        /></view>
      </view>
   
      
    </view>
    <view class="footerKeepBtn">
      <view class="keepBtn" @tap="keepUser">保 存</view>
    </view>
  </up-popup>
</template>

<script setup>
// import tableData from './a.js'
import { onLoad, onShow } from "@dcloudio/uni-app";
import { listIgnoreUser } from "@/api/http";
import { ref } from "vue";
import modal from "@/plugins/modal";
const selectedIndexs = ref([]);
const total = ref(0);
const table = ref();
const tableList = ref([]);
const loading = ref(false);
const params = ref({
  name: "",
  // 每页数据量
  pageSize: 5,
  // 当前页
  pageNum: 1,
});
const $emit = defineEmits("keepUser", "close");
const props = defineProps({
  sigleSelect: {
    type: Boolean,
    default: true,
  },
  show: {
    type: Boolean,
    default: false,
  },
});
onLoad(() => {
  selectedIndexs.value = [];
  getData(1);
});
function keepUser() {
  if (selectedIndexs.value.length === 0) return modal.msgError("请选择审核人");
  if (props.sigleSelect) {
    // 单选
    $emit("keepUser", [tableList.value[selectedIndexs.value[0]]]);
  } else {
    let arr = [];
    selectedIndexs.value.forEach((v) => {
      arr.push(tableList.value[v]);
    });
    $emit("keepUser", arr);
  }
}
function close() {
  $emit("close");
}
// 多选处理
function selectedItems() {
  return selectedIndexs.value.map((i) => tableData[i]);
}
// 多选
function selectionChange(e) {
  // 假设e.detail包含选中行的索引数组
  const currentIndexes = e.detail.index; // 此处使用的是假定的属性，具体属性名需要根据实际使用的组件库文档来确定
  if (props.sigleSelect) {
    // 单选
    if (currentIndexes.length > 1) {
      // 如果选中了多于一行，只保留最后一个选中的项
      const lastSelectedIndex = currentIndexes[currentIndexes.length - 1];
      selectedIndexs.value = [lastSelectedIndex]; // 更新selectedIndexs为只包含最后选中项的数组
      // 清空之前的选中状态
      table.value.clearSelection();
      // 仅选中最后一个选中的项
      table.value.toggleRowSelection(lastSelectedIndex, true);
    } else {
      // 如果只选择了一项或未选择，直接更新selectedIndexs
      selectedIndexs.value = currentIndexes;
    }
  } else {
    selectedIndexs.value = currentIndexes;
  }
}
// 分页触发
function change(e) {
  table.value.clearSelection();
  selectedIndexs.value.length = 0;
  getData(e.current);
}
// 搜索
function search() {
  getData(1, params.value.name);
}

// 获取数据
async function getData(pageNum, name = "") {
  loading.value = true;

  const res = await listIgnoreUser({ ...params.value, pageNum, name });
  tableList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}
</script>

<style lang="scss">
.search {
  width: 60%;
  margin: 20rpx 0;
  padding-left: 30rpx;
}

.uni-container {
  width: 100%;
}
.tableUser {
  overflow: hidden;
  width: 700rpx;
  height: 60vh;
  background-color: #fff;
  border-radius: 20rpx;
}
.table-user-body{
  height: calc(60vh - 180rpx);
    overflow: auto;
}
.footerKeepBtn {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 70rpx;
  margin-bottom: 20rpx;
  padding-right: 20rpx;
  .keepBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 100%;
    background-color: #007aff;
    border-radius: 10rpx;

    color: #fff;
  }
}
</style>
